<template>
  <div class="app-container">
    <div style="backgroundColor: #fff">
      <el-form class="formList"
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="100px">
        <em style="font-size: 18px;font-style: normal;margin-bottom: 16px"
          class="big_title_style">项目叠加</em>
        <el-row>

          <el-form-item label="门店"
            prop="storeId">
            <el-select v-model="queryParams.storeId"
              placeholder="请选择门店"
              clearable
              size="small"
              @keyup.enter.native="handleQuery">
              <el-option v-for="dict in storeInFoOptions"
                :key="dict.storeId"
                :label="dict.storeName"
                :value="dict.storeUid" />
            </el-select>
          </el-form-item>

          <el-form-item label="日期"
            prop="applyAuthTimeArray">
            <el-date-picker v-model="queryParams.applyAuthTimeArray"
              type="daterange"
              align="right"
              style="width: 232px"
              value-format="yyyy-MM-dd"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item style="margin-left: 22px">
            <el-button type="primary"
              icon="el-icon-search"
              size="mini"
              @click="getList">搜索</el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <!-- <el-row style="width: 100%;background-color: #fff;">
        <el-col :span="7"
          style="padding-left: 200px;">
          <div>
            <span>{{ oneData.peopleNumber || 0 }}</span><br />
            <span>总计服务人数</span>

          </div>

        </el-col>

        <el-col :span="7"
          style="padding-left: 200px;">
          <div>
            <span>{{ oneData.peopleTimes || 0 }}</span><br />
            <span>总计服务次</span>
          </div>
        </el-col>

        <el-col :span="7"
          style="padding-left: 200px;">
          <div>
            <span>{{ oneData.itemNumber || 0 }}</span><br />
            <span>服务项目数</span>
          </div>
        </el-col>
      </el-row> -->
      <div class="order-data-show">
        <div class="order-data-item"
          v-for="(item, index) in countInfoArr"
          :key="index">
          <!-- <div class="order-data-item-img"><img :src="item.img"
              alt="" /></div> -->
          <div class="order-data-item-info">
            <div class="order-data-item-label">{{ item.title }}</div>
            <div class="order-data-item-num"
              :style="{ color: item.color }">
              {{ oneData[item.value] || 0 }}
              <span class="order-data-item-num-unit">{{ item.unit }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="divTable">
        <div style="font-size: 14px;color: #999;"
          class="mb10">项目叠加人数分布图</div>
        <el-table border
          :data="oneList">
          <el-table-column label="总计项目叠加人数"
            align="center"
            prop="name">
            <template slot-scope="scope">
              {{ scope.row.data[0].peopleTimes }}
            </template>
          </el-table-column>
          <el-table-column label="单次项目人数"
            align="center"
            prop="name">
            <template slot-scope="scope">
              {{ scope.row.data[1].peopleTimes }}
            </template>
          </el-table-column>
          <el-table-column label="二次项目人数"
            align="center"
            prop="name">
            <template slot-scope="scope">
              {{ scope.row.data[2].peopleTimes }}
            </template>
          </el-table-column>
          <el-table-column label="三次项目人数"
            align="center"
            prop="name">
            <template slot-scope="scope">
              {{ scope.row.data[3].peopleTimes }}
            </template>
          </el-table-column>
          <el-table-column label="四次项目人数"
            align="center"
            prop="name">
            <template slot-scope="scope">
              {{ scope.row.data[4].peopleTimes }}
            </template>
          </el-table-column>
          <el-table-column label="五次项目人数"
            align="center"
            prop="name">
            <template slot-scope="scope">
              {{ scope.row.data[5].peopleTimes }}
            </template>
          </el-table-column>
          <el-table-column label="六次项目人数"
            align="center"
            prop="name">
            <template slot-scope="scope">
              {{ scope.row.data[6].peopleTimes }}
            </template>
          </el-table-column>

        </el-table>
      </div>
    </div>

    <div class="mt20"
      style="backgroundColor: #fff">
      <el-form class="formList"
        :model="queryParamsTwo"
        ref="queryForm"
        :inline="true"
        label-width="100px">
        <em style="font-size: 18px;font-style: normal;margin-bottom: 16px"
          class="big_title_style">到店次数</em>
        <el-row>

          <el-form-item label="门店"
            prop="storeId">
            <el-select v-model="queryParamsTwo.storeId"
              placeholder="请选择门店"
              clearable
              size="small"
              @keyup.enter.native="handleQuery">
              <el-option v-for="dict in storeInFoOptions"
                :key="dict.storeId"
                :label="dict.storeName"
                :value="dict.storeUid" />
            </el-select>
          </el-form-item>

          <el-form-item label="日期"
            prop="applyAuthTimeArray">
            <el-date-picker v-model="queryParamsTwo.applyAuthTimeArray"
              type="daterange"
              align="right"
              style="width: 232px"
              value-format="yyyy-MM-dd"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item style="margin-left: 22px">
            <el-button type="primary"
              icon="el-icon-search"
              size="mini"
              @click="getListTwo">搜索</el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <!-- <el-row style="width: 100%;background-color: #fff;">
        <el-col :span="7"
          style="padding-left: 200px;">
          <div>
            <span>{{ twoData.peopleNumber || 0 }}</span><br />
            <span>总计服务人数</span>

          </div>

        </el-col>

        <el-col :span="7"
          style="padding-left: 200px;">
          <div>
            <span>{{ twoData.peopleTimes || 0 }}</span><br />
            <span>总计服务次</span>
          </div>
        </el-col>

        <el-col :span="7"
          style="padding-left: 200px;">
          <div>
            <span>{{ twoData.itemNumber || 0 }}</span><br />
            <span>服务项目数</span>
          </div>
        </el-col>
      </el-row> -->
      <div class="order-data-show">
        <div class="order-data-item"
          v-for="(item, index) in countInfoArr"
          :key="index">
          <!-- <div class="order-data-item-img"><img :src="item.img"
              alt="" /></div> -->
          <div class="order-data-item-info">
            <div class="order-data-item-label">{{ item.title }}</div>
            <div class="order-data-item-num"
              :style="{ color: item.color }">
              {{ twoData[item.value] || 0 }}
              <span class="order-data-item-num-unit">{{ item.unit }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="divTable">
        <div style="font-size: 14px;color: #999;"
          class="mb10">到店次数人数分布图</div>
        <el-table border
          :data="twoList">
          <el-table-column label="总计到店人数"
            align="center"
            prop="name">
            <template slot-scope="scope">
              {{ scope.row.data[0].peopleNumber }}
            </template>
          </el-table-column>
          <el-table-column label="单次到店人数"
            align="center"
            prop="name">
            <template slot-scope="scope">
              {{ scope.row.data[1].peopleNumber }}
            </template>
          </el-table-column>
          <el-table-column label="二次到店人数"
            align="center"
            prop="name">
            <template slot-scope="scope">
              {{ scope.row.data[2].peopleNumber }}
            </template>
          </el-table-column>
          <el-table-column label="三次到店人数"
            align="center"
            prop="name">
            <template slot-scope="scope">
              {{ scope.row.data[3].peopleNumber }}
            </template>
          </el-table-column>
          <el-table-column label="四次到店人数"
            align="center"
            prop="name">
            <template slot-scope="scope">
              {{ scope.row.data[4].peopleNumber }}
            </template>
          </el-table-column>
          <el-table-column label="五次到店人数"
            align="center"
            prop="name">
            <template slot-scope="scope">
              {{ scope.row.data[5].peopleNumber }}
            </template>
          </el-table-column>
          <el-table-column label="六次到店人数"
            align="center"
            prop="name">
            <template slot-scope="scope">
              {{ scope.row.data[6].peopleNumber }}
            </template>
          </el-table-column>
          <el-table-column label="七次到店人数"
            align="center"
            prop="name">
            <template slot-scope="scope">
              {{ scope.row.data[7].peopleNumber }}
            </template>
          </el-table-column>
          <el-table-column label="六次到店人数"
            align="center"
            prop="name">
            <template slot-scope="scope">
              {{ scope.row.data[8].peopleNumber }}
            </template>
          </el-table-column>
          <el-table-column label="九次到店人数"
            align="center"
            prop="name">
            <template slot-scope="scope">
              {{ scope.row.data[9].peopleNumber }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

  </div>

</template>


<script>
import {
  selectGroup
} from "@/api/platform/store"


import {
  selectOtherVo, selectOtherVoTimes
} from "@/api/statistics/statistics";
export default {
  components: {

  },
  data () {
    return {
      form: {},
      rules: {},
      storeInFoOptions: [],
      oneList: [],
      twoList: [],
      oneData: [],
      twoData: [],
      queryParams: {
        applyAuthTimeArray: [],
        startTime: null,
        endTime: null,
        storeId: null,
      },
      queryParamsTwo: {
        applyAuthTimeArray: [],
        startTime: null,
        endTime: null,
        storeId: null,
      },
      countInfoArr: [
        {
          img: require("@/assets/images/order-icon-14.png"),
          title: "总计服务人数",
          value: "peopleNumber",
          color: "#E00065",
          unit: "",
        },
        {
          img: require("@/assets/images/order-icon-11.png"),
          title: "总计服务次",
          value: "peopleTimes",
          color: "#FFA082",
          unit: "",
        },
        {
          img: require("@/assets/images/order-icon-12.png"),
          title: "服务项目数",
          value: "itemNumber",
          color: "#00D1B3",
          unit: "",
        },
      ],
    };
  },

  created () {
    this.getList();
    this.getListTwo();
    selectGroup().then(response => {
      this.storeInFoOptions = response.data || [];
    });

  },
  methods: {
    getList () {
      if (this.queryParams.applyAuthTimeArray != null && this.queryParams.applyAuthTimeArray.length > 0) {
        let arr = this.queryParams.applyAuthTimeArray;
        this.queryParams.startTime = arr[0] + " 00:00:00";
        this.queryParams.endTime = arr[1] + " 23:59:59";
      } else {
        this.queryParams.startTime = null;
        this.queryParams.endTime = null;
      }

      selectOtherVo(this.queryParams).then((response) => {
        this.oneList = []
        let data = response.rows;
        this.oneList.push(data)
        this.oneData = response.data;
      });

    },
    getListTwo () {
      if (this.queryParamsTwo.applyAuthTimeArray != null && this.queryParamsTwo.applyAuthTimeArray.length > 0) {
        let arr = this.queryParamsTwo.applyAuthTimeArray;
        this.queryParamsTwo.startTime = arr[0] + " 00:00:00";
        this.queryParamsTwo.endTime = arr[1] + " 23:59:59";
      } else {
        this.queryParamsTwo.startTime = null;
        this.queryParamsTwo.endTime = null;
      }

      selectOtherVoTimes(this.queryParamsTwo).then((response) => {
        this.twoList = []
        let data = response.rows;
        this.twoList.push(data)
        this.twoData = response.data;
      });
    },
    submitForm () {

    },
    colsePro () {

    }
  }
}
</script>

<style scoped lang="scss">
#container {
  width: 100%;
  height: 50%;
}

#photo {
  float: left;
  width: 70%;
}

#content {
  float: right;
  width: 30%;
}

.product-header {
  position: absolute;
  top: 0;
  width: 600px;
  padding: 18px;
  background-color: #fff;
  -moz-border-radius: 4px;
  border-radius: 4px;
  height: 40px;
}

.product-div {
  background-color: #fff;
  position: relative;
  padding-right: 16px;
  padding-top: 54px;
  border: 1px solid #ebebeb;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 1200px;
  margin: auto;
  top: 20px;
  bottom: -20px;
  margin-bottom: 50px;
}

.product-div-two {
  background-color: #fff;
  position: relative;
  padding-right: 16px;
  padding-top: 54px;
  border: 1px solid #ebebeb;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 1200px;
  margin: auto;
  top: 20px;
  bottom: -20px;
  margin-bottom: 60px;
}

.product-div-three {
  background-color: #fff;
  position: relative;
  padding-right: 16px;
  padding-top: 54px;
  border: 1px solid #ebebeb;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 1200px;
  margin: auto;
  top: 20px;
  bottom: -20px;
  margin-bottom: 100px;
}

.place-font {
  color: #999;
  font-size: 13px;
  position: relative;
}

.dw {
  border: 1px;
  position: fixed;
  bottom: 0px;
  left: 0;
  z-index: 200;
  padding-left: 120px;
  background-color: #fff;
  border-top: 1px solid #eee;
  width: 100%;
  height: 55px;
}

.div-img {
  display: none;
}

.div-text {
  margin: 22px 0px 12px 120px;
  color: #2656bd;
  cursor: pointer;
  font-size: 13px;
}

.div-append {
  line-height: 34px;
  font-size: 14px;
  color: #606266;
  margin-left: -50%;
}

.div-appendHide {
  line-height: 34px;
  font-size: 14px;
  color: #606266;
  margin-left: -50%;
  visibility: hidden;
}

.product-div {
  background-color: #fff;
  position: relative;
  padding-right: 16px;
  padding-top: 54px;
  border: 1px solid #ebebeb;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 1200px;
  margin: auto;
  top: 20px;
  bottom: -20px;
  margin-bottom: 50px;
}

.product-header {
  position: absolute;
  top: 0;
  width: 600px;
  padding: 18px;
  background-color: #fff;
  -moz-border-radius: 4px;
  border-radius: 4px;
  height: 40px;
}

.order-data-show {
  display: flex;
  margin: 10px 0;
  .order-data-item {
    flex: 1;
    padding: 16px 32px;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 8px;
    &:not(:last-child) {
      margin-right: 12px;
    }
    .order-data-item-img {
      width: 68px;
      height: 68px;
      margin-right: 32px;
    }
    .order-data-item-num {
      font-size: 30px;
      color: #5da9ef;
      font-weight: 500;
      line-height: 1;
      display: flex;
      align-items: flex-end;
      .order-data-item-num-unit {
        font-size: 16px;
        margin-left: 12px;
        line-height: 1.4;
      }
    }
    .order-data-item-label {
      font-size: 16px;
      color: #999;
      line-height: 1;
      margin-bottom: 14px;
    }
  }
}
</style>
